使用json-server模拟REST API

现在在开发一个应用(Web或者App)的时候,通常需要前后端进行配合。一般情况下,我们使用REST风格的JSON结构进行数据交互。

实际工作中,我们会遇到服务端API的开发速度不能够满足前端开发速度的情况。这个时候,前端可以通过创建一个静态的JSON文件来模拟数据。但是呢,这样的模拟数据仅仅可以显示,如果要做增、删、改操作,必然不是那么方便。

json-server,就是为了给我们解决模拟REST API的一个npm模块。我们不需要自己写任何的代码,只需要将自己需要的模拟数据写入一个JSON文件中,json-server就可以向外提供REST风格的接口,方便我们进行数据模拟。

接下来,让我们看看这个神奇的工具吧!

基本使用

安装

npm install -g json-server

模拟数据

创建一个文件db.json,并填入以下数据

{
  "posts": [
    {
      "id": 1,
      "title": "用json-server模拟rest api",
      "author": "zxguan"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "用json-server模拟rest api",
      "postId": 1
    }
  ],
  "profile": {
    "name": "zxguan"
  }
}

使用

运行: json-server --watch db.json

在浏览器中输入http://localhost:3000

index.jpg

输入http://localhost:3000/posts

[{
    id: 1,
    title: "用json-server模拟rest api",
    author: "zxguan"
}]

其他类似的,我们可以通过postman进行POST、PUT和DELETE操作。使用时指定 Content-Type: application/json

post.jpg

其他特性

过滤查询

GET /posts?title=test.........&author=zxguan
GET /posts?id=1&id=2
GET /comments?author.name=zxguan

分页

使用 _start_end_limit 进行分页。

GET /posts?_start=0&_end=10
GET /posts/1/comments?_start=10&_end=20
GET /posts/1/comments?_start=20&_limit=10

排序

使用 _sort_order进行排序

GET /posts?_sort=views&_order=DESC
GET /posts/1/comments?_sort=votes&_order=ASC

运算

  • _gte : 大于等于
  • _lte : 小于等于
  • _ne : 不等于
  • _like : like操作

用法为: 字段_gte 、字段_lte 、 字段_ne 、 字段_like

GET /posts?views_gte=10&views_lte=20
GET /posts?id_ne=1
GET /posts?title_like=server

全文检索

参数为q,

GET /posts?q=internet

关联关系

通过_embed获得子资源;通过_expand获得父级资源,通过资源名称获得嵌套资源

如:

GET /posts?_embed=comments
GET /posts/1?_embed=comments
GET /comments?_expand=post
GET /comments/1?_expand=post
GET  /posts/1/comments
POST /posts/1/comments

高级特性

使用其他数据源

使用js生成随机数

将以下代码复制进index.js

module.exports = function() {
  var data = { users: [] }
  // Create 1000 users
  for (var i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: 'user' + i })
  }
  return data
}

运行:json-server index.js

使用外部数据链接

json-server http://jsonplaceholder.typicode.com/db

自定义路由

方式一:使用routes.json

{
  "/api/": "/",
  "/v0.1/:resource/:id/show": "/:resource/:id",
  "/v0.1/:category": "/posts/:id?category=:category"
}

运行: json-server db.json --routes routes.json

方式二:使用自定义服务

将以下代码复制如server.js

var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()

server.use(middlewares)

server.get("/echo",function(req,res){
    res.jsonp(req.query)
})

server.use(jsonServer.bodyParser)
server.use(function(req,res,next){
    if(req.method === 'POST'){
        req.body.createAt = Date.now()
    }
    next()
})

server.use(router)
server.listen(3000, function () {
  console.log('JSON Server is running')
})

然后运行 node server.js

当然,这种方式你需要使用到package.json,然后将npm install json-server --save

方式三: 使用rewriter

复制以下代码到server.js

var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()


server.use(middlewares)
server.use(jsonServer.bodyParser)

server.use('/v0.1', router)


server.listen(3000, function () {
  console.log('JSON Server is running')
})

或者:

var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()


server.use(middlewares)
server.use(jsonServer.bodyParser)

server.use(jsonServer.rewriter({
  '/api/': '/',
  '/blog/:resource/:id/show': '/:resource/:id'
}))

server.use(router)

server.listen(3000, function () {
  console.log('JSON Server is running')
})

自定义输出

复制以下代码到server.js

var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
var middlewares = jsonServer.defaults()
var _ = require('lodash');

server.use(middlewares)
server.use(jsonServer.bodyParser)

router.render = function (req, res) {

    var value = res.locals.data

    if (_.isArray(value)) {
        res.jsonp({
            items: value
        })
    }else{
        res.jsonp(value)
    }


}

server.use(router)
server.listen(3000, function () {
  console.log('JSON Server is running')
})